<template>
    <view>
        <view class="">
        	<swiper style="height: 500upx;" class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
        		
        		<swiper-item>
        		   <image style="width: 100%;height: 500upx;" :src="res.real_head_img" mode=""></image>
        		</swiper-item>
        	</swiper>
        </view>   
		  <view class="" style="height: 80upx;background-color: #fff;line-height: 80upx;display: flex;">
		  	<image style="height: 60upx;width: 60upx;margin: 10upx 30upx 10upx 20upx;" :src="res.real_head_img" mode=""></image>
			<text style="">{{res.user_name}}</text>
		  </view>
		  <view class="" style="height: 100%;background-color: #fff;line-height: 50upx;margin: 5upx 0upx 10upx;padding: 0upx 50upx;">
		  		<view class="" style="text-align: center;">
		  			<text style="">{{res.title}}</text>
		  		</view>	
				<text>{{res.content}}</text>
		  </view>
			<!-- 相关商品 -->
		  <view style="height: 400upx;background-color: #fff;line-height: 50upx;margin: 5upx 0upx 1upx;padding: 0upx 50upx;" v-if="res.goodsInfo">
		  		<view>
		  			<text style="">相关商品</text>
		  		</view>	
		  		<view class="" style="display: flex;justify-content: space-around;margin: 30upx 0upx;">
		  			<view class="">
		  				<image style="width: 200upx;height: 200upx;" src="../../../../static/01.png" mode=""></image>
						<view class="" style="text-align: center;">
							<text style="font-weight: bold;">大头娃娃啊</text>
							<view class="">
								480.00
							</view>
						</view>
		  			</view>
					<view class="">
						<image style="width: 200upx;height: 200upx;" src="../../../../static/01.png" mode=""></image>
						<view class="" style="text-align: center;">
							<text style="font-weight: bold;">大头娃娃啊</text>
							<view class="">
								480.00
							</view>
						</view>
					</view>
					<view class="">
						<image style="width: 200upx;height: 200upx;" src="../../../../static/01.png" mode=""></image>
						<view class="" style="text-align: center;">
							<text style="font-weight: bold;">大头娃娃啊</text>
							<view class="">
								480.00
							</view>
						</view>
					</view>
		  		</view>	
		  </view>
		  <view class="" style="height: 100upx;background-color: #fff;line-height: 100upx;padding: 25upx 50upx;border-top: 1upx solid #C1C1C1;display: flex;justify-content: space-around;">
		  	<view class="" style="display: flex;">
		  		<image style="width: 40upx;height: 40upx;margin-right: 10upx;" src="../../../../static/dianzan.png" mode="" v-if="!dianzan" @click="yes_no"></image>
		  		<image style="width: 40upx;height: 40upx;margin-right: 10upx;" src="../../../../static/dianzan1.png" mode="" v-if="dianzan" @click="yes_no"></image>
				<view class="">
					<text>点赞</text>
				</view>
		  	</view>
			<view class="" style="display: flex;">
				<image style="width: 40upx;height: 40upx;margin-right: 10upx;" src="../../../../static/shoucang.png" mode=""></image>
				<view class="">
					<text>收藏</text>
				</view>
			</view>
			<view class="" style="display: flex;">
				<image style="width: 40upx;height: 40upx;margin-right: 10upx;" src="../../../../static/fenxiang.png" mode=""></image>
				<view class="">
					<text>分享</text>
				</view>
			</view>
		  </view>
    </view> 
</template>

<script>
	export default {
	    data() {
				return {
					res:{},
					article_id:'',
					user_id:'',
					background: ['color1', 'color2', 'color3'],
					indicatorDots: true,
					autoplay: true,
					interval: 2000,
					duration: 500,
					dianzan: false
				}
	    },
		onLoad:function(e){
			this.article_id = e.articleid
			uni.showLoading()
			uni.getStorage({
				key: 'user_id',
				success: (res) => {
					this.user_id = res.data
					this.setAjax()
				},
				fail: () => {
					uni.navigateTo({
						url: '../../../index/index'
					});
				}
			});
		},
	  methods: {
			setAjax(){
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/LabelPaper/paperDetail',
					method: 'POST',
					data:{
						id: this.article_id
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						uni.hideLoading()
						this.res = res.data.data[0]
					},
					fail: () => {},
					complete: () => {}
				});
			},
			yes_no() {
				if (this.dianzan == false) {
					this.like()
					return
				}
				if (this.dianzan == true) {
					this.nolike()
					return
				}
			},
			like() {
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/LabelPaper/clickLike',
					method: 'POST',
					data:{
						paper_id: this.article_id,
						user_id: this.user_id
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						if(res.data.code == 200) {
							// 设为点赞状态
							this.dianzan = true
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			nolike() {
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/LabelPaper/cancelLike',
					method: 'POST',
					data:{
						paper_id: this.article_id,
						user_id: this.user_id
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						if(res.data.code == 200) {
							// 设为非点赞状态
							this.dianzan = false
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			changeIndicatorDots(e) {
					this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
					this.autoplay = !this.autoplay
			},
			intervalChange(e) {
					this.interval = e.target.value
			},
			durationChange(e) {
					this.duration = e.target.value
			}
		}
	}
</script>

<style>

</style>
